<template>

<div id="pyp">
    <div class="pypbox">
        订单：{{n}}
    </div>
    <div class="order-news">
      <img src="../assets/ZWTimg/shop1.png" alt />
      <div class="div1">
          <div>Java企业级支付全家桶设计与实战</div>
          <div class="fz-14">视频不限期，老师专属答疑，多种形式教学服务</div>
          <span class="fz-14">购买成功后将立即开启教学服务 </span><a href="https://www.imooc.com/help/detail/152" class="fz-12">什么是教学服务？</a>
      </div>
      <div style="width:100px"></div>
      <div class="div2">实付金额：￥328</div>
      <div style="width:100px"></div>
    </div>
    <div class="pypbox1">
            <div class="pyp-way">       支付方式   </div>

        <ul class="pyp-way-def">
            <li>支付宝</li>
            <li>微信支付</li>
            <li>京东支付</li>
        </ul>

    </div>
    <div class="pypbox2">
        <div>请完成支付</div>
        <div class="label">
            <div class="fz-20">
                            <span>应付金额：</span>
            <span style="color:red">￥5950.00</span>
            </div>
            <button>立即支付</button>
            <div class="fz-12">支付有问题，点我</div>
        </div>
    </div>

</div>
 
</template>

<script>
export default {
    data() {
        return {
           
        }
    },
    
    computed: {
        n(){
           return parseInt(Math.random()*2007091741304959+1000000000000000 )
        }
    },
    methods: {
            
    },
};
</script>

<style>
#pyp{}
#pyp .pypbox{}

#pyp .order-news {
  /* width: 1350px; */
  width: 100%;
  height: 175px;
  background: #f3f5f7;
  display: flex;
  margin: 20px 0;
  justify-content: space-around;
  border-bottom: 1px solid white;
}
#pyp .order-news img {
  width: 200px;
  height: 115px;
  /* margin: auto; */
  margin: 30px 0;
  border: solid red 1px;
}
#pyp .order-news .div1 {
  margin: 30px 0;
  font-size: 20px;
}
#pyp .order-news .div2 {
  line-height: 175px;
  color: red;
  font-size: 18px;
}
#pyp .pypbox1{
    border-top:grey 1px solid ;
    border-bottom:grey 1px solid ;
    padding: 20px 0;

}
#pyp .pyp-way-def{
    display: flex;
    justify-content: space-around;
}
#pyp .pyp-way-def li{
    width: 196px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background: #f3f5f7;
}
#pyp .pyp-way-def .active{
    border: solid 1px red;

}
#pyp .pypbox2{
    display: flex;
    justify-content: space-between;
}
#pyp .pypbox2 button{
    width: 140px;
    height: 40px;
    background: red;
    color: white;
    text-align: end;
}

</style>